<template>
	<view class="bind-weixin">
		<view class="is_success margin-sm text-center" v-if="isBind">
			<view class="icon">
				<uv-icon name="checkmark-circle-fill" color="primary" size="50"></uv-icon>
			</view>
			<view class="margin-sm font-size-lg">恭喜你绑定成功</view>
			<view class="margin-sm font-size-sm text-color-placeholder">现在你可以在登录时选择一键授权登录</view>
			<view class="button">
				<uv-button type="primary" text="返回首页" @click="toPage('back')"></uv-button>
			</view>
		</view>

		<view class="is_error margin-sm text-center" v-else>
			<view class="icon">
				<uv-icon name="error-circle-fill" color="error" size="50"></uv-icon>
			</view>
			<view class="margin-sm font-size-lg">你还未绑定一键登录</view>
			<view class="margin-sm font-size-sm text-color-placeholder">绑定一键登录后不用再输入账号密码，即可快速登录</view>
			<view class="button">
				<uv-button type="error" text="立即绑定" :loading="binding" @click="nowBind"></uv-button>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import useAppStore from '@/store/app';
import { bindWx } from '@/api';
import { ref } from 'vue';

const appStore = useAppStore();

var isBind = computed(() => {
	return appStore.member && appStore.member.openid;
});

function toPage(path: string) {
	if (path == 'back') {
		uni.navigateBack();
	}
}

var binding = ref(false);
async function nowBind() {
	try {
		binding.value = true;
		const { code } = await uni.login({ provider: 'weixin' });
		await bindWx(code);
		await appStore.info();
		binding.value = false;
	} catch (error) {
		//TODO handle the exception
		binding.value = false;
	}
}
</script>

<style lang="scss" scoped>
.bind-weixin {
	.is_error,
	.is_success {
		background-color: #ffffff;
		padding: 50rpx;
		min-height: 40vh;
	}

	.button {
		width: 50%;
		margin: 50rpx auto 0;
	}

	.icon {
		width: min-content;
		margin: 0 auto;
	}
}
</style>
